<script setup>
import procureLogo from '@/assets/menuLogo/procure.svg'
import storeHouseLogo from '@/assets/menuLogo/storehouse.svg'
import procureRestoreLogo from '@/assets/menuLogo/procureRestore.svg'
import {ipc} from "@/utils/ipcRenderer";

const props = defineProps({
  routeMap: {
    type: Array,
    default: () => []
  }
})

const menuClick = (item) => {
  ipc.invoke('controller.home.openNewWindow', {
    content: item.route,
    windowName: 'home',
    windowTitle: item.label
  })
}
</script>

<template>
  <div class="procure-main">
    <el-card v-for="item in props.routeMap" :key="item.label" class="menu-item" shadow="hover" @click="menuClick(item)">
      <img :src="item.icon" alt="">
      <div class="label">{{ item.label }}</div>
    </el-card>
  </div>
</template>

<style scoped lang="less">
.procure-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  height: 60vh;

  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    cursor: pointer;
    &:hover {
      box-shadow: var(--el-box-shadow-light);
    }

    .label {
      color: #943b3b;
    }
  }
}
</style>
